<script setup lang='ts'>
import { computed, onMounted } from 'vue';
import useMessage from '@/hooks/useMessage';

const props = defineProps({
  list: {
    type: Object,
    required: true
  }
})

const { jumpingUser, jumpingComment, jumpingPost } = useMessage(props);







// #region 动态宽度

//动态头像宽度
const dynamicAvatar = computed(() => {
  return window.innerWidth > 768 ? 50 : 40;
})

//动态content :span
const dynamicContentSpan = computed(() => {
  return window.innerWidth > 768 ? 23 : 19;
})

//动态avatar :span
const dynamicAvatarSpan = computed(() => {
  return window.innerWidth > 768 ? 1 : 3;
})
// #endregion


onMounted(async () => {

})
</script>

<template>
  <div class="comment">
    <el-row class="row">
      <el-col :span="1" class="hidden-md-and-up"></el-col>
      <el-col :span="dynamicAvatarSpan" class="avatar">
        <el-avatar shape="circle" :size="dynamicAvatar" :src="list.avatar" />
      </el-col>
      <el-col :span="dynamicContentSpan" class="content">
        <div class="header">
          <div>
            <span class="name" @click="jumpingUser">{{ list.userName }}</span>
            <span class="reply"> 于{{ list.commentTime }}@了你</span>
          </div>
        </div>
        <div class="data" @click="jumpingComment">
          <span class="comment-content">{{ list.content }}</span>
          <span class="time hidden-md-and-down">{{ list.commentTime }}</span>
        </div>
        <div>
          <span class="post-name" @click="jumpingPost">{{ list.postTitle }}</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style lang='scss' scoped>
//电脑端样式
@media screen and (min-width: 768px) {
  .comment {
    border-bottom: $no-highlight-color solid 1px;

    &:hover {
      // 好看的hover效果
      transform: translateY(-2px);
    }

    .row {
      display: flex;
      align-items: center;


      .content {
        padding-left: 20px;



        .header {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .name {
          margin-right: 30px;
          color: $highlight-color;

          &:hover {
            text-decoration: underline;
            cursor: pointer;
          }
        }

        .reply {
          color: $no-highlight-color;
        }

        .delete {
          &:hover {
            cursor: pointer;
          }
        }
      }

      .data {
        margin: 5px 0;
        display: flex;
        justify-content: space-between;

        .comment-content {
          font-weight: bold;
          width: 85%;
          // 超出一行省略号
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;


          &:hover {
            text-decoration: underline;
            cursor: pointer;
          }
        }

        .time {
          color: $no-highlight-color;
        }
      }

      .post-name {
        // color: ;

        &:hover {
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }

  }
}

//手机端样式
@media screen and (max-width: 767px) {
  .comment {
    border-bottom: $no-highlight-color solid 1px;
    // border: 1px solid red;

    .row {
      display: flex;
      align-items: center;




      .content {

        .header {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .name {
          margin-right: 10px;
          font-weight: bold;
        }

        .reply {
          font-size: 12px;
          color: $no-highlight-color;
        }
      }

      .data {
        margin: 5px 0;
        // 超出一行省略号
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

    }

  }
}
</style>